<template>
	<view class="page">
		<u-navbar fixed placeholder autoBack leftIconColor="#232832" bgColor="#FFFFFF"></u-navbar>
		<c-content :top="statusBarHeight + 44">
			<view class="page-title">手机号登陆</view>
			<u-form :model="form">
				<u-form-item>
					<u-input placeholder="请输入手机号" clearable maxlength="11" v-model="form.phone" border="bottom" type="number"
						color="#232832"></u-input>
				</u-form-item>
				<u-form-item>
					<u-input placeholder="请输入验证码" clearable maxlength="6" v-model="form.code" border="bottom" type="number"
						color="#232832">
						<template slot="suffix">
							<u-code ref="code" :seconds="120" @change="codeChange" keepRunning unique-key="phone-login"></u-code>
							<text class="code" @click="sendCode()">{{ tip }}</text>
						</template>
					</u-input>
				</u-form-item>
			</u-form>
			<view class="btn" @click="login()">
				<view class="btn-inner">登陆</view>
			</view>
		</c-content>
	</view>
</template>

<script>
	import mixins from '@/mixins/index.js'
	export default {
		mixins: [mixins],
		data() {
			return {
				form: {
					phone: '',
					code: ''
				},
				tip: '获取验证码'
			}
		},
		methods: {
			sendCode() {
				const rs = uni.validator.phone(this.form.phone)
				if (rs) {
					uni.toast.show(rs)
					return
				}
				this.$refs.code.start()
			},
			codeChange(tip) {
				this.tip = tip
			},
			login() {
				if (this.checkVal(this.form.phone, 'phone') && this.checkVal(this.form.code, 'code')) {

				}
			},
			checkVal(val, type) {
				const rs = uni.validator[type](val)
				if (rs) {
					uni.toast.show(rs)
					return false
				}
				return true
			}
		}
	}
</script>

<style scoped lang="scss">
	.page {
		background-color: #FFFFFF;

		&-title {
			margin: 50px 0 10px 15px;
			color: #232832;
			font-size: 24px;
			line-height: 28px;
			font-weight: 500;
			vertical-align: top;
		}

		.code {
			color: #6E86FF;
		}

		&::v-deep .u-form {
			width: calc(100% - 60px);
			margin: 0 30px;
		}

		.btn {
			margin: 60px 30px;
			background: #6E86FF;
			padding: 10px 0;
			border-radius: 20px;
			color: #ffffff;
			text-align: center;
			letter-spacing: 4px;
		}

		&::v-deep .u-input__content {

			/* WebKit browsers */
			input::-webkit-input-placeholder {
				color: #fff;
				font-size: 14px;
			}

			/* Mozilla Firefox 4 to 18 */
			input:-moz-placeholder {
				color: #fff;
				opacity: 1;
				font-size: 14px;
			}

			/* Mozilla Firefox 19+ */
			input::-moz-placeholder {
				color: #fff;
				opacity: 1;
				font-size: 14px;
			}

			/* Internet Explorer 10+ */
			input:-ms-input-placeholder {
				color: #fff;
				font-size: 14px;
			}
		}
	}
</style>